<template>
  <div class="record-info">
    <div class="record-info-title">历年战绩</div>
    <div class="record-info-list">
      <div class="record-info-header">年份</div>
      <div class="record-info-header">联赛等级</div>
      <div class="record-info-header">胜</div>
      <div class="record-info-header">平</div>
      <div class="record-info-header">负</div>
      <div class="record-info-header">积分</div>
      <div class="record-info-header">排名</div>

    </div>
    <div class="record-info-split"></div>
    <div
      class="record-info-list"
      v-for="(item, index) in achievements"
      :key="index"
    >
      <div class="record-info-data">{{item.year}}</div>
      <div class="record-info-data">{{item.level}}</div>
      <div class="record-info-data">{{item.won}}</div>
      <div class="record-info-data">{{item.draw}}</div>
      <div class="record-info-data">{{item.lost}}</div>
      <div class="record-info-data">{{item.credit}}</div>
      <div class="record-info-data">{{item.rank}}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    achievements: {
      object: Array,
      default: []
    }
  }
}
</script>

<style lang="less">
.record-info {
  &-title {
    padding: 10px;
    color: #333;
    font-size: 14px;
  }
  &-list {
    display: flex;
    flex: 1;
    padding: 5px 0px;
    background-color: #fff;
  }
  &-split {
    width: 100%;
    background-color: #eee;
    height: 1px;
  }
  &-header {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: #000;
  }
  &-data {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #666;
    padding: 5px 0px;
  }
}
</style>
